import { ref,computed, defineComponent, SetupContext } from 'vue';
import { ScorePropsType, scoreProps } from './score.props';

export default defineComponent({
    name: 'FInputGroupDesign',
    props: scoreProps,
    /*emits: [
        'updateExtendInfo',
        'clear',
        'valueChange',
        'clickHandle',
        'blurHandle',
        'focusHandle',
        'enterHandle',
        'iconMouseEnter',
        'iconMouseLeave',
        'keyupHandle',
        'keydownHandle',
        'inputClick'
    ] as (string[] & ThisType<void>) | undefined,*/
    setup(props: ScorePropsType, context: SetupContext) {
        const model = defineModel()
        const activeIndex = ref(0)

        const activeClass = (i:number) => {
            let activeValue = activeIndex.value || model.value
            let className = 'icon-normal'
            if (activeValue >= props.highThreshold) {
                className = props.iconClasses[2]
            } else if (activeValue >= props.lowThreshold) {
                className = props.iconClasses[1]
            } else if (activeValue > 0) {
                className = props.iconClasses[0]
            }
            if (i > activeValue) {
                className = 'icon-normal'
            }
            return className
        }
// 游标样式
        const cursor = computed(() => {
            return {
                'cursor': props.disabled ? 'default' : 'pointer'
            }
        })

        const activeColor = (i:number) => {
            let activeValue = activeIndex.value || model.value
            let color = props.voidColor
            if (activeValue >= props.highThreshold) {
                color = props.colors[2]
            } else if (activeValue >= props.lowThreshold) {
                color = props.colors[1]
            } else if (activeValue > 0) {
                color = props.colors[0]
            }
            if (i > activeValue) {
                color = props.voidColor
            }
            return {
                color
            }
        }

        const text = computed(() => {
            let {texts} = props
            let value = model.value || activeIndex.value + 1
            return texts ? texts[value - 1] || texts[texts.length - 1] : ''
        })

        function iconEnter(i:number) {
            activeIndex.value = i || 0
        }

        function iconLeave() {
            activeIndex.value = 0
        }

        function iconClick(i:number) {
            model.value = props.clearable && model.value === i ? 0 : i
        }

        return () => {
            return (
                <div>aaa</div>
            );
        };
    }
});
